

/*
 * @Autor: Mr Lu
 * @Version: 1.0
 * @Date: 2019-12-03
 * @LastEditors: OBKoro1
 * @LastEditTime: 2019-12-03
 * @Description:  任务详情
  
 */
<template>
  <div id="TaskModeDetail" class="p-box">
    <div class="p-return" style="margin-bottom:0">
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" v-close v-if="!$route.query.type">
          <i class="iconfont angle-left iconangle-left"></i>
          <span class="lan-header-back">返回</span>
        </mu-button>
        <mu-button icon slot="left"  v-else>
          <!-- <i class="iconfont angle-left iconangle-left"></i> -->
        </mu-button>
        详情
        <span
          icon
          slot="right"
          @click="goHistory"
          style="position: relative;right: 0.15rem;color:rgba(0, 128, 203, 1)"
        >历史纪录</span>
        <!-- <mu-button icon slot="right" @click="showFilter">
          <i class="iconfont iconshaixuan4"></i>
        </mu-button>-->
      </mu-appbar>
    </div>
    <div class="p-content" v-if="noData">
      <NoData />
    </div>
    <div class="p-content" ref="$content" v-else>
      <div class="lan-dialog-body" style="background:#fff">
        <mu-form
          ref="form"
          :model="form"
          class="mu-lan-form"
          :label-position="'left'"
          label-width="28%"
        >
          <mu-form-item label="责任单位">
            <mu-text-field v-model="form.deptName" container="bottomSheet" :readonly="true"></mu-text-field>
          </mu-form-item>
          <mu-form-item label="平面图标记" class="form-between" style="box-shadow:none">
            <span class="flex ai-center">
              <label style="margin-right:0.05rem">隐藏标号</label>
              <mu-switch v-model="showFlag" @change="FlagChange"></mu-switch>
            </span>
          </mu-form-item>
          <div class="picture-area">
            <div class="map-container">
              <MapShow
                v-if="form.photoUrl"
                ref="MapShow"
                :enableClick="false"
                :width="'100%'"
                :url="form.photoUrl"
                v-model="form.pointList"
                :showPoint="showPoint"
                :readonly="true"
              ></MapShow>
            </div>
          </div>
          <div class="tbox-container">
            <div class="tDes">
              <!--   "qualCount": "8",//合格次数
    "sumCount": "14",//实测次数
              "prop": "57.14",//合格率-->
              <div class="tDesList flex wrap">
                <div class="tDesList-item">实测点数：{{des.pointNum}}</div>
                <div class="tDesList-item">实测次数：{{des.sumCount}}</div>
                <div class="tDesList-item">合格次数：{{des.qualCount}}</div>
                <div class="tDesList-item">合格率：{{des.prop}}%</div>
              </div>
            </div>
            <div class="tbox" v-for="(item,index) in tableList" :key="index">
              <div class="tbox-title">
                <span style="margin-right:0.15rem">实测点位{{item.pIndex}}</span>
                <span>实测次数：{{item.content.length}}</span>
              </div>
              <div class="tbox-content">
                <table class="custom-table" style="border: 1px solid #E0E0E0">
                  <tr>
                    <th style="width: 1.07rem;">实测分项</th>
                    <th style="width: 1.1rem;">实测内容</th>
                    <th style="width: .8rem;">数值</th>
                    <th style="width: .8rem;">结果</th>
                  </tr>
                  <tr v-for="(td,tIndex) in item.content" :key="tIndex">
                    <!-- 实测分项 -->
                    <td style="width: 1.07rem;">{{td.subentryName}}</td>
                    <!-- 实测内容 -->
                    <td style="width: 1.1rem;">{{td.content}}</td>
                    <!-- 数值 -->
                    <td style="width: .8rem;">{{td.value}}</td>
                    <!-- 结果 -->
                    <td style="width: .8rem;">
                      <span v-if="td.result==1">合格</span>
                      <span v-if="td.result==0">不合格</span>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
          <mu-form-item label="参与人">
            <mu-text-field v-model="form.joinUser" container="bottomSheet" :readonly="true"></mu-text-field>
          </mu-form-item>
          <mu-form-item label="实测人">
            <mu-text-field v-model="form.createdUser" container="bottomSheet" :readonly="true"></mu-text-field>
          </mu-form-item>
          <mu-form-item label="实测时间">
            <mu-text-field v-model="form.createdTime" container="bottomSheet" :readonly="true"></mu-text-field>
          </mu-form-item>
          <mu-form-item label="现场照片" class="inline-item" style="padding-bottom:0.15rem;">
            <div v-for="(url,uIndex) in scenePhotosList" :key="uIndex" class="img-box">
              <img :src="url" :preview="uIndex" />
            </div>
          </mu-form-item>
          <!-- <mu-form-item label="抄送至" class="form-between" style="box-shadow:none"></mu-form-item>
          <div class="copyUserList" v-show="copyUserList.length">
            <mu-chip
              class="demo-chip"
              v-for="(user,uIndex) in copyUserList"
              :key="uIndex"
            >{{user.userName}}</mu-chip>
          </div>-->
          <mu-form-item label="抄送人" class="inline-item hasPadding">
            <div class="userBox" style v-for="(user,uIndex) in copyUserList" :key="uIndex">
              <div
                class="ly_flex ly_flex_just_center ly_flex_ali_center add"
              >{{user.userName.substr(0,1)}}</div>
              <span>{{user.userName}}</span>
            </div>
          </mu-form-item>
        </mu-form>
        <div
          class="flex"
          style="padding:0.2rem;box-shadow: 0px -1px 0px 0px #e0e0e0;"
          v-if="failArray.length>0"
        >
          <div class="flex-1">
            <mu-button full-width color="primary" @click="goCreateBill()">生成整改通知单</mu-button>
          </div>
        </div>
      </div>
    </div>
    <ImgPreview
      :imgUrls="scenePhotosList"
      :open="showImgPreview"
      @close="showImgPreview=false"
      :slideIndex="imgIndex"
    ></ImgPreview>
  </div>
</template>
<script>
import ImgPreview from "@/preview/ImgPreview.vue";
import FilePreview from "@/preview/FilePreview.vue";
export default {
  name: "TaskModeDetail",
  components: {
    FilePreview,
    ImgPreview
  },
  data() {
    return {
      pageType: "",
      noData: false,
      form: {
        areaId: "",
        areaName: "",
        deptId: "",
        deptName: "",
        projectId: "",
        projectName: "",
        measureId: "",
        joinUser: "",
        createdUser: "",
        createdTime: "",
        photoUrl: "",
        pointList: []
      },
      des: {
        qualCount: "0", //合格次数
        sumCount: "0", //实测次数
        prop: "0" //合格率
      },
      imgIndex: 0,
      fileUrl: "",
      failArray: [],
      showImgPreview: false,
      showFileLog: false,
      showPoint: true,
      showFlag: false,
      scenePhotosList: [],
      copyUserList: [],
      tableList: []
    };
  },
  watch: {},
  async created() {
    console.log('进入')
    this.initPage();
  },
  methods: {
    //表单初始化
    initPage() {
      this.$openLoading();
      this.getDetails(this.$route.query.id);
    },
    //隐藏标号 swicth 切换
    FlagChange(val) {
      this.showPoint = !val;
    },
    //打开图片预览
    openImgLog(item, index) {
      this.imgIndex = index;
      this.showImgPreview = true;
    },
    //关闭图片预览
    closeFileDialog() {
      this.showImgPreview = false;
    },
    getDetails(id) {
      this.$openLoading();
      this.$A
        .Go("GET", "/safety/measure/measureTaskDetail", { id })
        .then(res => {
         
          this.$closeLoading();
          if (res.code == 200) {
            if (res.body) {
              //  alert('1')
              this.noData = false;
              let data = res.body.measureVo;
              this.form = {
                measureId: data.id,
                deptName: data.deptName, //责任单位
                deptId: data.deptId, //责任单位
                photoUrl: data.photoUrl, //平面图
                joinUser: data.joinUserName, //参与人
                createdUser: data.createdUserName, //实测人
                createdTime: data.createdTime //实测时间
              };
              this.des = {
                qualCount: data.qualCount, //合格次数
                sumCount: data.sumCount, //实测次数
                prop: data.prop, //合格率
                pointNum: data.pointNum //实测点数
              };
              if (data.measureUrl) {
                this.scenePhotosList = data.measureUrl.split(","); //现场照片
              }
              this.copyUserList = data.copyList; //抄送人
              if (data.pointList && data.pointList.length) {
                this.dealPlanfigure(data.pointList, data.messageList);
              }
            } else {
              this.noData = true;
            }
          }
        });
    },
    dealPlanfigure(pointList, messageList) {
      let pArray = [];
      let tArray = [];
      let failArray = [];
      pointList.forEach((element, index) => {
        let content = [];
        let left = element.split(",")[0];
        let top = element.split(",")[1];

        pArray.push({
          left: left,
          top: top,
          lng: left,
          lat: top
        });
        messageList.forEach(item => {
          let point = item.point.split(",");
          if (point[0] == left && point[1] == top) {
            content.push(item);
          }
          if (item.result == "0") {
            failArray.push(item);
          }
        });
        tArray.push({
          pIndex: index + 1,
          content: content
        });
      });
      this.form.pointList = pArray;
      this.tableList = tArray;
      this.failArray = failArray;
    },
    goCreateBill() {
      this.$router.push({
        name: "CreateBill",
        query: {
          measureId: this.form.measureId
          // projectId: this.form.projectId,
          // projectName: this.form.deptId,
          // areaId: this.form.areaId,
          // areaName: this.form.areaName,
          // deptName: this.form.deptName, //责任单位
          // deptId: this.form.deptId //责任单位
        }
      });
    },
    goHistory() {
      this.$router.push({
        name: "HistoryRecords",
        query: {
          taskId: this.$route.query.id,
        }
      });
    }
  }
};
</script>

<style lang="scss">
#TaskModeDetail {
  .lan-nodata {
    height: 100%;
    background: #fff;
  }
  .img-box {
    width: 0.75rem;
    height: 0.75rem;
    margin: 0 0.1rem;
    position: relative;
    img {
      height: 100%;
      width: 100%;
    }
    .close {
      position: absolute;
      height: 0.2rem;
      width: 0.2rem;
      line-height: 0.2rem;
      font-size: 0.15rem;
      top: 0.04rem;
      right: 0.04rem;
      color: #fff;
      border-radius: 50%;
      text-align: center;
      background-color: #ff4242;
    }
  }
}
</style>